<template>
  <el-container class="grid-container">
    <el-header class="navbar">
      <div class="navbar-inner">
        <div class="left">
          <el-page-header title=" " class="header">
            <template #icon>
              <el-icon @click="back"><ArrowLeftBold/></el-icon>
            </template>
            <template #content>
              <span class="text">个人中心</span>
            </template>
          </el-page-header>
        </div>
      </div>
    </el-header>
    <el-main class="main">
      <el-card class="grid-form">
        <el-descriptions
          class="margin-top"
          title="个人信息"
          :column="1"
          :size="size"
          border
        >
          <template #extra>
            <el-button type="primary" @click="goToModifyInfo">修改信息</el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <Iphone />
                </el-icon>
                手机号码
              </div>
            </template>
           {{data.phoneNumber}}
          </el-descriptions-item>
          
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <User />
                </el-icon>
                真实姓名
              </div>
            </template>
           {{data.name}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <Calendar />
                </el-icon>
                出生日期
              </div>
            </template>
            {{data.birthday}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <Male />
                </el-icon>
                性别
              </div>
            </template>
            <el-tag size="small">
              <div v-if="data.sex==0">
                女
              </div>
              <div v-if="data.sex==1">
                男
              </div>
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import {
  Iphone,
  Calendar,
  Male,
  User,
} from '@element-plus/icons-vue'
import axios from '@/utils/axiosUtils';
console.log(sessionStorage.getItem("phoneNumber"));
let data=reactive({
    phoneNumber:'',
    name:'',
    birthday:'',
    sex:'',
})
function parseJWT(token) {
  // 分割JWT的三个部分
  let parts = token.split('.');
  let base64Url = parts[1];
  let rawData = atob(base64Url.replace(/-/g, '+').replace(/_/g, '/')); // 替换URL安全的字符
  let decoder = new TextDecoder('utf-8');
  let payload = JSON.parse(decoder.decode(new Uint8Array(rawData.split('').map(c => c.charCodeAt(0)))));
  return payload;
}
let token = sessionStorage.getItem("token")
let user = reactive({})
user=parseJWT(token)
console.log(user)
sessionStorage.setItem("phoneNumber",user.phoneNumber)
const getData = () => {
  axios.get('http://localhost:7000/service-neps/supervisor/getMsg', {
    params: { phoneNumber: user.phoneNumber}
  }).then(res => {
    // console.log(res.data);
    data.phoneNumber = res.data.phoneNumber;
    data.name = res.data.name;
    data.birthday = res.data.birthday;
    data.sex = res.data.sex;
  }).catch(err => {
    console.error('Failed to fetch data:', err);
  });
};
const size = ref('')
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
let back = function(){
  router.push({path:"/selectGrid"})
}
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
})
onMounted(()=>{
  getData()
})
const router = useRouter();

const goToModifyInfo = () => {
  router.push({ name: 'informationModify' });
};
</script>


<style scoped>
.grid-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('@/assets/kongjing2.jpg') no-repeat center center;
  background-size: cover;
}
.header {
  display: flex;
}
.button {
  margin-left: 100px;
}
.historyButton {
  background: #99b1c4;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #96afc5, #96afc3);
  color: white;
  padding: 10px;
  width: 100%;
}

.navbar-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.grid-form {
  width: 67vw;
  max-width: 400px;
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>
